<template>
  <div class="bs-sysMsg" @click="warningListShow = true">
    <i
      class="el-alert__icon el-icon-bell color-white relative pointer"
      @click="warningListShow = true"
    >
      <!-- <span
        class="absolute black-bg"
        style="color: red; top: 0; right: 0; border-radius: 50%"
        >{{ systemMsg.length }}</span
      > -->
    </i>
    <div class="msg__content" v-if="systemMsg.length > 0">
      <el-carousel
        height="20px"
        direction="vertical"
        indicator-position="none"
        :autoplay="true"
      >
        <el-carousel-item v-for="item in systemMsg" :key="item.id">
          <span
            v-if="showTime"
            style="padding-right: 4px"
            class="color-warning1"
            >{{ item.lastHappenTimeString || item.timeStamp || "" }}</span
          >
          <!-- @click="$emit('commit', item)" -->
          <a
            href="javascript:void(0)"
            class="item color-white"
            :title="item.title || item.name"
            >{{ item.title || item.name }}产生{{ item.msg }}</a
          >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else class="color-white" style="padding-left: 10px">
      {{ msgInfo }}
    </div>
    <!-- 告警列表 -->
    <el-dialog
      width="70%"
      title="告警列表"
      :visible.sync="warningListShow"
      :modal="true"
      :modal-append-to-body="true"
      append-to-body
      v-dialogDrag
      :close-on-click-modal="false"
      custom-class="widget-dialog absolute center no-margin color-white black-bg"
    >
      <div class="widget-table" v-if="warningListShow">
        <widget-psychz-q23
          class="no-select"
          :dongType="dongType"
          @setDongType="setDongType"
          classNow=""
          :valueList="tabList"
          styles="margin:14px 0;text-aligin:center"
        />
        <el-table
          :data="warningList"
          style="width: 100%"
          height="500px"
          @row-click="goAlarm"
          class="scrollbar-slinder"
        >
          <el-table-column
            class-name="pointer"
            v-for="item in keyValues"
            :key="item.key"
            :prop="item.key"
            :label="item.value"
            :width="item.width ? item.width : ''"
            v-show="!item.hidden"
            :style="`color:${item.labelColor}`"
          />
        </el-table>
      </div>
      <template slot="footer">
        <!-- <el-button size="mini" type="primary">确认</el-button> -->
        <el-button class="button-cancel" @click="warningListShow = false"
          >返回</el-button
        >
      </template>
    </el-dialog>
    <!-- 告警弹窗 -->
    <el-dialog
      title="告警详细"
      :visible.sync="gaojingShow"
      :modal="true"
      append-to-body
      :close-on-click-modal="false"
      custom-class="widget-dialog widget-form-dashboard absolute center no-margin color-white black-bg "
    >
      <div>
        <form-create
          v-model="editFormInstance"
          :value.sync="editData"
          :rule="realEditRule"
          :option="editOptions"
        />
      </div>
      <template slot="footer">
        <el-button type="primary" @click="commit">处理</el-button>
        <el-button type="primary" @click="commitSave"
          >添加白名单并处理</el-button
        >
        <el-button class="button-cancel" @click="gaojingShow = false"
          >返回</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";

import { ledgendText, ledgendStatus, outlineStatus } from "@/constants/legend";
import { editFormOptions } from "@/formRules";
// import { editRule } from "@/formRules/TopologyRules";
import { alarmGetAllAlarm, alarmGetBaimingDan, alarmHandelAlarm } from "@/api";
export default {
  components: {},
  data() {
    return {
      audioMp3: null,
      warningListShow: false,
      keyValues: [
        { value: "资源名称", key: "name", width: 200 },
        { value: "资源类型", key: "leixing", width: 100 },
        { value: "端口名称", key: "portName", width: 180 },
        { value: "告警级别", key: "levelName", width: 120 },
        { value: "发生时间", key: "timeStamp", width: 220 },
        { value: "最后发生时间", key: "handletime", width: 220 },
        { value: "告警信息", key: "msg" },
        { value: "是否处理", key: "statusText", width: 100 }
        // { value: "操作", key: "status" },
      ],
      editFormInstance: {},
      gaojingShow: false,
      editOptions: editFormOptions(),
      editData: {},
      realEditRule: [],
      tabList: [
        { name: "实时告警", value: 1 }
        // { name: "告警历史", value: 2 },
      ],
      dongType: 1,
      historyList: [],
      searchData: {
        page: 1,
        size: 1000
      },
      nowWarning: {}
    };
  },
  props: {
    showTime: {
      type: Boolean,
      default: false
    },
    systemMsg: {
      type: Array,
      default: () => {
        return [];
      }
    },
    msgInfo: {
      type: String,
      default: "该拓扑下面，暂时没有告警消息!"
    }
  },
  computed: {
    warningList() {
      let list = [];
      if (this.dongType == 2) {
        list = this.historyList;
      } else {
        list = this.systemMsg;
      }
      if (list.length) {
        list.forEach(e => {
          e.levelName = ledgendText()[e.level];
          e.labelColor = ledgendStatus()[e.level];
          if (e.status) {
            e.statusText = "已处理";
          }
          e.statusText = "未处理";
        });
        return list;
      } else {
        return [];
      }
    },
    ...mapState(["user"]),
    userName() {
      return this.user.username;
    }
  },
  methods: {
    showMore() {
      this.warningListShow = true;
    },
    goAlarm(item) {
      this.editData = item;
      this.nowWarning = item;
      this.$nextTick(() => {
        this.gaojingShow = true;
      });
    },
    setDongType(value) {
      this.dongType = value;
    },
    getHistoryList() {
      alarmGetAllAlarm(this.searchData).then(({ data }) => {
        this.historyList = data;
      });
    },
    commitSave() {
      let params = {
        id: this.nowWarning.id,
        userName: this.userName
      };
      this.$confirm("是否确认添加白名单并处理?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "widget-confirm"
      })
        .then(() => {
          this.commitTo();
          alarmGetBaimingDan(params).then(({ data, code }) => {
            if (code == 200) {
              this.$notified.success({
                message: "已处理完成！"
              });
              this.$emit("initGetAlarms");
            } else {
              this.$notified.error({
                message: msg
              });
            }
            this.gaojingShow = false;
          });
        })
        .catch(() => {
          this.$notified({
            message: "已取消处理"
          });
        });
    },
    commitTo() {
      this.$emit("commitTo");
    },
    commit() {
      let params = {
        id: this.nowWarning.id,
        userName: this.userName
      };
      this.$confirm("是否确认处理当前告警?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "widget-confirm"
      })
        .then(() => {
          this.commitTo();
          alarmHandelAlarm(params).then(({ data, code, msg }) => {
            if (code == 200) {
              this.$notified.success({
                message: "已处理完成！"
              });
              this.$emit("initGetAlarms");
            } else {
              this.$notified.error({
                message: msg
              });
            }
            this.gaojingShow = false;
          });
        })
        .catch(() => {
          this.$notified({
            message: "已取消处理"
          });
        });
    }
  },
  watch: {
    dongType(n) {
      if (n == 2) {
        this.getHistoryList();
      }
    },
    systemMsg(n) {
      if (n.length) {
        let mp3 = "/bx-dashboard/video/warning.mp3";
        this.audioMp3 = new Audio(mp3);
        this.audioMp3.play();
        setTimeout(() => {
          this.audioMp3.pause();
        }, 10000);
      } else {
        if (this.audioMp3) {
          this.audioMp3.pause;
          this.audioMp3 = null;
        } else {
          this.audioMp3 = null;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.bs-sysMsg {
  position: relative;
  display: flex;
  width: 200px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 2px;
  overflow: hidden;
  opacity: 1;
  align-items: center;
  transition: opacity 0.2s;
}
.bs-sysMsg .msg__content {
  display: table-cell;
  padding: 0 8px;
  width: 100%;
}
.bs-sysMsg .msg__content a.item {
  font-size: 14px;
  //   opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover {
  text-decoration: underline;
}
</style>
